<template>
  <config-provider :themes="themes" :i18n-render="i18nRender">
    <div class="layout-wrapper">
      <Nuxt />
      <van-tabbar v-model="tabbarActive" class="layout__tabbar" route fixed>
        <van-tabbar-item
          v-for="item of tabbarItems"
          :key="item.icon"
          :url="item.url"
          :to="item.to"
          :icon="item.icon"
          :replace="item.target === '_self'"
          icon-prefix="icon"
        >
          <span class="layout__tabbar-text">{{ item.text }}</span>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </config-provider>
</template>
<script>
import { ConfigProvider } from '@/components';
import LayoutMixin from '@/mixins/layout.mixin';
import { isAbsoluteUrl } from '@/utils/path';

export default {
  name: 'LayoutTabbar',
  mixins: [LayoutMixin],
  components: {
    ConfigProvider,
  },
  data() {
    return {
      tabbarActive: 1,
      tabbarItems: Object.values(this.$siteConfig.tabNavs).map(({ to, ...rest }) => ({
        to: isAbsoluteUrl(to) ? undefined : to,
        url: isAbsoluteUrl(to) ? to : undefined,
        ...rest,
      })),
    };
  },
};
</script>

<style lang="less" scoped>
.layout-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: @white;
}

.layout__tabbar {
  ::v-deep {
    &.van-tabbar__placeholder {
      background-color: @white;
    }
    .van-tabbar {
      box-shadow: 0px 0px 15px 0px fade(@gray-5, 35%);
      border-radius: 30px 30px 0px 0px;
      overflow: hidden;
    }
    i {
      font-size: 20px;
      margin-bottom: 5px;
    }
  }
  &-text {
    font-size: 10px;
  }
}
</style>
